<template>
  <div class="app-container">
    <div class="search-container">
      <el-form :model="searchParam" :inline="true" label-width="78px">
        <el-form-item label="成品批次号">
          <el-input
            v-model="searchParam.productBatch"
            placeholder="请输入成品批次号"
            clearable
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handelSearch"
            ><i-ep-search />查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <div style="margin-bottom: 3px">
        <el-radio-group v-model="docType" @change="radioChange" size="large">
          <el-radio-button label="1">原材料</el-radio-button>
          <el-radio-button label="2">检测记录</el-radio-button>
          <el-radio-button label="3">过程记录</el-radio-button>
          <el-radio-button label="4">加工参数</el-radio-button>
          <el-radio-button label="5">过程参数</el-radio-button>
          <el-radio-button label="6">异常记录</el-radio-button>
          <el-radio-button label="7">工装模具</el-radio-button>
          <el-radio-button label="8">耗材信息</el-radio-button>
          <el-radio-button label="9">返工</el-radio-button>
          <el-radio-button label="10">变化点</el-radio-button>
        </el-radio-group>
      </div>
      <rawMaterial
        v-if="docType == '1'"
        :productBatch="productBatch"
      ></rawMaterial>
      <testingRecords
        v-if="docType == '2'"
        :productBatch="productBatch"
      ></testingRecords>
      <qmsProcessRecord
        v-if="docType == '3'"
        :productBatch="productBatch"
      ></qmsProcessRecord>
      <qmsMachining
        v-if="docType == '4'"
        :productBatch="productBatch"
      ></qmsMachining>
      <processParameters
        v-if="docType == '5'"
        :productBatch="productBatch"
      ></processParameters>
      <abnormalRecords
        v-if="docType == '6'"
        :productBatch="productBatch"
      ></abnormalRecords>
      <toolingMold
        v-if="docType == '7'"
        :productBatch="productBatch"
      ></toolingMold>
      <consumablesInfo
        v-if="docType == '8'"
        :productBatch="productBatch"
      ></consumablesInfo>
      <qmsRework v-if="docType == '9'" :productBatch="productBatch"></qmsRework>
      <qmsChangePoint
        v-if="docType == '10'"
        :productBatch="productBatch"
      ></qmsChangePoint>
      <!-- <el-pagination
        :background="true"
        :current-page="pageable.pageNum"
        :page-size="pageable.pageSize"
        :page-sizes="[10, 25, 50, 100]"
        :total="pageable.total"
        layout="total, sizes, prev, pager, next, jumper"
        class="mt-[20px]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      /> -->
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { useTable, useDownload, useDictionary } from "@/utils/useTable";
import request from "@/utils/request";
import { filterOrder } from "@/utils/commonHooks";
defineOptions({
  name: "EAMEQUGENERALDOCUMENT",
  inheritAttrs: false,
});
// 目录树显隐
const showTree = ref(true);
const handelTree = () => {
  showTree.value = !showTree.value;
};

// 定义按钮
let docType = ref("1");

const radioChange = (e) => {
  docType.value = e;
};

const searchParam = reactive({
  productBatch: "",
  assetKind: 1,
});

const productBatch = ref("");
const handelSearch = () => {
  if (searchParam.productBatch) {
    productBatch.value = searchParam.productBatch || "";
  } else {
    productBatch.value = "";
  }
};

// // 请求参数
// let requestApi = "/eam/eamCommonDoc/queryByPage";

// // 是否需要分页
// const pagination = true;

// const initParam = reactive({
//   sort: {
//     column: "",
//     orderBy: "",
//   },
// });

// // 初始化搜索参数数据
// const searchParamInit = {
//   productBatch: "",
//   assetKind: 1,
// };

// const deleteParam = {
//   api: "/eam/eamCommonDoc/delete",
//   data: {},
// };

// // 数据请求错误后处理
// function requestError() {}

// const dataCallBack = ref(undefined); // 无需二次数据处理&不传赞数也行

// // 表格操作 Hooks
// const {
//   tableData,
//   pageable,
//   searchParam,
//   ids,
//   getTableList,
//   search,
//   reset,
//   handleSizeChange,
//   handleCurrentChange,
//   handleSelectionChange,
//   handleTableDelete,
//   loading,
// }: any = useTable(
//   requestApi,
//   initParam,
//   searchParamInit,
//   pagination,
//   dataCallBack.value,
//   requestError,
//   deleteParam
// );

// onMounted(() => {
//   getTableList();
// });

// // 排序
// // 监听表格排序方法
// function onTableSortChanged(column: any) {
//   console.log(column);

//   const { prop, order } = column;
//   console.log(prop, order);

//   initParam.sort = {
//     column: prop,
//     orderBy: filterOrder(order),
//   };
// }
// // 监听页面 initParam 改化，重新获取表格数据
// watch(() => initParam, getTableList, { deep: true });

const addDialog = reactive({
  visible: false,
  readvisible: false,
  title: "",
  data: {},
  docType: "1",
});

// 查询详情
async function getInfo(id: string) {
  request({
    url: `/eam/eamCommonDoc/get/${id}`,
    method: "get",
  })
    .then((data) => {
      addDialog.data = data.data;
      addDialog.visible = true;
    })
    .catch((res) => {
      console.log(res);
    });
}

/** 打开资产型号表单弹窗 */
const assetTypeId = ref("");
function openDialog(roleObj?: Object) {
  if (roleObj) {
    addDialog.title = "修改设备通用文档";
    getInfo(roleObj.id);
  } else {
    assetTypeId.value = searchParam.value.assetTypeId;
    addDialog.title = "新增设备通用文档";
    addDialog.visible = true;
  }
  addDialog.readvisible = false;
}

/** 打开资产型号表单弹窗 详情 */
function openDialogdetail(roleObj?: any) {
  addDialog.title = "设备通用文档详情";
  getInfo(roleObj.id);
  addDialog.readvisible = true;
}

function changeVisible(value: boolean, docType: string) {
  addDialog.visible = value;
  searchParam.value.docType = docType;
  search();
  if (!value) {
    addDialog.data = {};
    assetTypeId.value = "";
  }
}

// 导入excel
const uploadApi = "/eam/eamCommonDoc/upload";
const excelBox = ref(false);
const uploadBtn = ref(false);
const uploadFile = ref("");
const fileName = ref("");

function excelBoxOpen() {
  excelBox.value = true;
}

function getfilepath(e: any) {
  const file = e.target.files[0];
  fileName.value = file.name;
  uploadFile.value = file;
  uploadBtn.value = false;
}

function upload() {
  if (!uploadFile.value) {
    ElMessage({
      type: "warning",
      message: "请选择文件！",
    });
    return;
  }

  let formdata = new FormData();
  formdata.append("file", uploadFile.value);
  let config = { headers: { "Content-Type": "multipart/form-data" } };
  request
    .post(uploadApi, formdata, config)
    .then((res) => {
      ElMessage({
        type: "success",
        message: "上传成功！",
      });

      excelBox.value = false;
      uploadBtn.value = true;
      search();
    })
    .catch((error) => {
      console.log(error);
    });
}

async function deleteItem(id: any) {
  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const { data } = await request({
      url: `/eam/eamCommonDoc/deleteItem/${id}`,
      method: "post",
    });
    search();
  });
}

// 获取制造商列表
const makerList: any = ref([]);
const getMakerList = async () => {
  request({
    url: `/eam/eammaker/getList`,
    method: "post",
    data: { assetKind: "1" },
  })
    .then((res) => {
      makerList.value = res.data;
    })
    .catch((res) => {
      console.log(res);
    });
};

// 获取资产品牌数据
const brandList: any = ref([]);
const getBrandList = async () => {
  await request({
    url: "eam/eamassetbrand/getList",
    method: "post",
    data: { assetKind: "1" },
  }).then((res) => {
    brandList.value = res.data;
  });
};

// 重置按钮
const handeleReset = () => {
  searchParam.value.docType = docType.value;
  searchParam.value.assetTypeId = "";
  searchParam.value.makerId = "";
  searchParam.value.brandId = "";
  searchParam.value.docNo = "";
  searchParam.value.modelNo = "";
  search();
};

onMounted(() => {});
</script>
<style scoped lang="scss">
@media only screen and (max-width: 768px) {
  .el-col-xs-24 {
    padding-right: 10px !important;
  }
}
</style>
